<template>
	<a-card :bordered="false">
		<a-typography>
			<a-typography-title :level="4">XRequest示例(对接接口)</a-typography-title>
			<a-typography-paragraph>
			</a-typography-paragraph>
		</a-typography>
		<a-divider />
		<XRequest />
	</a-card>
	<a-row :gutter="[10, 10]">

		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>建议发送器演示</template>
				<BubbleSuggestion></BubbleSuggestion>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>发送器演示</template>
				<BubbleSender></BubbleSender>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>发送器多种效果演示</template>
				<BubbleSenderBasic></BubbleSenderBasic>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>Markdown渲染演示</template>
				<BubbleMarkdown></BubbleMarkdown>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>带标题和底部的气泡演示</template>
				<BubbleHeaderAndFooter></BubbleHeaderAndFooter>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>头像和位置演示</template>
				<BubbleAvatarAndPlacement></BubbleAvatarAndPlacement>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>提示列表演示</template>
				<BubblePrompts></BubblePrompts>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>打字效果演示</template>
				<BubbleTyping></BubbleTyping>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>AI对话列表演示</template>
				<BubbleList></BubbleList>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>自定义气泡列表演示</template>
				<BubbleListCustom></BubbleListCustom>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>带菜单的会话列表演示</template>
				<BubbleConversations></BubbleConversations>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>思维链演示</template>
				<BubbleThoughtChain></BubbleThoughtChain>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :bordered="false">
				<template #title>可折叠思维链演示</template>
				<BubbleThoughtChainCollapsible></BubbleThoughtChainCollapsible>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>流式输出聊天演示</template>
				<BubbleStreamChat></BubbleStreamChat>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>SSE输出聊天演示(对接接口)</template>
				<BubbleStreamProtocol></BubbleStreamProtocol>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :bordered="false">
				<template #title>聊天区域演示(对接接口)</template>
				<XChat></XChat>
			</a-card>
		</a-col>
		<a-col :span="24">
		<a-card :bordered="false">
			<template #title>带建议的和自定义表格的气泡</template>
			<BubbleSuggestions />
		</a-card>
	</a-col>


	</a-row>
</template>

<script setup name="sample">
import { Typography } from 'ant-design-vue'
import BubbleSuggestions from './components/BubbleSuggestions.vue'

import XRequest from './components/XRequest.vue'
import BubbleStreamProtocol from "./components/BubbleStreamProtocol.vue";
import BubbleSender from "./components/BubbleSender.vue";
import BubbleTyping from "./components/BubbleTyping.vue";
import BubbleMarkdown from "./components/BubbleMarkdown.vue";
import BubblePrompts from "./components/BubblePrompts.vue";
import BubbleHeaderAndFooter from "./components/BubbleHeaderAndFooter.vue";
import BubbleAvatarAndPlacement from "./components/BubbleAvatarAndPlacement.vue";
import BubbleList from "./components/BubbleList.vue";
import BubbleListCustom from "./components/BubbleListCustom.vue";
import BubbleConversations from "./components/BubbleConversations.vue";
import BubbleSenderBasic from "./components/BubbleSenderBasic.vue";
import BubbleSuggestion from "./components/BubbleSuggestion.vue";
import BubbleThoughtChain from "./components/BubbleThoughtChain.vue";
import BubbleThoughtChainCollapsible from "./components/BubbleThoughtChainCollapsible.vue";
import BubbleStreamChat from "./components/BubbleStreamChat.vue";
import XChat from "./components/XChat.vue";
</script>
